/** 店铺概况　页面 */
// import { Button, ImageBox } from 'common/controls';
import { default as site } from 'admin/site'
import { StationService } from 'admin/services/station';
import { imageUrl, Service } from 'admin/services/service';
import { FormValidator, rules } from 'maishu-dilu';
import 'bootstrap';
import { siteMap as userSiteMap, siteMap } from 'user/site';
// import app from 'admin/application';
import ClipboardJS = require('clipboard');
import imageManager from 'admin/controls/imageManager';
import { MemberService } from 'admin/services/member';
import React = require('react');
import ReactDOM = require('react-dom');
import { PageProps } from 'maishu-chitu-react';
import { ImageService } from "maishu-services-sdk";

let { protocol, port, host } = location;
let storeHomeUrl = `${protocol}//${host}/user/?appKey=${Service.appToken}`;

export default class StationIndexPage extends React.Component<PageProps, { store: Store }>{
    private qrcodeElement: HTMLElement;
    private nameInput: HTMLInputElement;
    private validator: FormValidator;
    element: HTMLElement;
    memberServie: MemberService;
    imageService: ImageService;

    constructor(props) {
        super(props);
        this.state = { store: {} as Store };

        let app = this.props.app;
        this.memberServie = this.props.createService(MemberService);
        this.imageService = new ImageService((err) => app.error.fire(app, err, app.currentPage)) //this.props.createService(ImageService);

        site.loadCSS(this.props.source.name);
    }
    async save() {
        let isValid = await this.validator.check();
        if (!isValid)
            return Promise.reject({});

        return this.memberServie.saveStore(this.state.store);
    }

    async componentDidMount() {
        let { required } = rules;
        this.validator = new FormValidator(this.element,
            { name: "name", rules: [required("店铺名称不能为空")] }
        )

        let qrcode = new QRCode(this.qrcodeElement, {
            text: site.userClientUrl,
            width: 160,
            height: 160,
        });
        qrcode.makeCode(site.userClientUrl);

        let storeId = site.appIdFromLocation();
        let store = await this.memberServie.getStore(storeId);
        store = store || {} as any
        this.setState({ store });

        this.nameInput.value = store.Name;
    }
    render() {
        let { store } = this.state;

        return (
            <div className="station-index" ref={e => this.element = e || this.element}>
                <ul className="nav nav-tabs">
                    <li className="dropdown pull-right">
                        <button className="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
                            <i className="icon-sitemap"></i>
                            <span>访问店铺</span>
                        </button>
                        <div className="dropdown-menu dropdown-menu-right" style={{ padding: 20 }}>
                            <div style={{ width: '100%', textAlign: 'center' }}>手机扫码访问</div>
                            <div style={{ width: 180, height: 180, padding: 10 }}
                                ref={(e: HTMLElement) => this.qrcodeElement = e || this.qrcodeElement} />
                            <div style={{ width: '100%' }}>
                                <button className="pull-left btn-link"
                                    ref={(e: HTMLButtonElement) => {
                                        if (!e) return;

                                        var clipboard = new ClipboardJS(e, {
                                            text: function () {
                                                return storeHomeUrl;
                                            }
                                        });

                                        clipboard.on('success', function (e) {
                                            ui.showToastMessage('商品链接已经成功复制');
                                        });

                                        clipboard.on('error', function (e) {
                                            ui.alert('商品链接已经成功失败');
                                        });
                                    }}>
                                    复制页面链接
                                </button>
                                <div className="pull-right">
                                    <button className="btn-link"
                                        onClick={() => {
                                            // let url = userApp.createUrl(siteMap.nodes.home_index);
                                            window.open(storeHomeUrl, "_blank");
                                        }}>
                                        电脑访问
                                    </button>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li className="pull-right">
                        <button className="btn btn-sm btn-primary"
                            ref={(e: HTMLButtonElement) => {
                                if (!e) return;
                                e.onclick = ui.buttonOnClick(() => this.save(), { toast: "保存成功" });
                            }}>
                            <i className="icon-save"></i>
                            <span>保存</span>
                        </button>
                    </li>
                </ul>
                <div className="clearfix">
                </div>
                <div className="well" style={{ minHeight: 100 }}>
                    <div className="row form-group">
                        <div className="col-lg-12">
                            <label className="col-md-4" style={{ width: 120 }}>店铺名称*</label>
                            <div className="col-md-8" style={{ maxWidth: 300 }}>
                                <input name="name" className="form-control"
                                    onChange={(e) => {
                                        store.Name = (e.target as HTMLInputElement).value;
                                        this.setState(this.state);
                                    }}
                                    ref={(e: HTMLInputElement) => this.nameInput = e || this.nameInput} />
                            </div>
                        </div>
                    </div>
                    <div className="row form-group">
                        <div className="col-lg-12">
                            <label className="col-md-4" style={{ width: 120 }}>店铺图标</label>
                            <div className="col-md-8" style={{ maxWidth: 300 }}>
                                <img className="img-responsive" title="点击上传店铺图标"
                                    src={store.ImagePath ? this.imageService.imageSource(store.ImagePath) : null}
                                    ref={(e: HTMLImageElement) => {
                                        if (!e) return;
                                        ui.renderImage(e, { imageSize: { width: 300, height: 300 } });
                                        e.onclick = () => {
                                            imageManager.show((imageIds) => {
                                                store.ImagePath = imageIds[0];
                                                this.setState(this.state);
                                            })
                                        }
                                    }} />
                            </div>
                        </div>

                    </div>
                </div>


            </div>
        );
    }
}

// export default async function (page: chitu.Page) {

//     app.loadCSS(page.name);

//     let member = page.createService(MemberService);

//     class StationIndexPage extends React.Component<{ store: Store }, { store: Store }>{
//         private qrcodeElement: HTMLElement;
//         private nameInput: HTMLInputElement;
//         private validator: FormValidator;

//         constructor(props) {
//             super(props);
//             this.state = { store: this.props.store };
//         }
//         async save() {
//             let isValid = await this.validator.check();
//             if (!isValid)
//                 return Promise.reject({});

//             return member.saveStore(this.state.store);
//         }

//         componentDidMount() {
//             let { required } = rules;
//             this.validator = new FormValidator(page.element,
//                 { name: "name", rules: [required("店铺名称不能为空")] }
//             )

//             let qrcode = new QRCode(this.qrcodeElement, {
//                 text: site.userClientUrl,
//                 width: 160,
//                 height: 160,
//             });
//             qrcode.makeCode(site.userClientUrl);
//         }
//         render() {
//             let { store } = this.state;

//             return (
//                 <div className="station-index">
//                     <ul className="nav nav-tabs">
//                         <li className="dropdown pull-right">
//                             <button className="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
//                                 <i className="icon-sitemap"></i>
//                                 <span>访问店铺</span>
//                             </button>
//                             <div className="dropdown-menu dropdown-menu-right" style={{ padding: 20 }}>
//                                 <div style={{ width: '100%', textAlign: 'center' }}>手机扫码访问</div>
//                                 <div style={{ width: 180, height: 180, padding: 10 }}
//                                     ref={(e: HTMLElement) => this.qrcodeElement = e || this.qrcodeElement} />
//                                 <div style={{ width: '100%' }}>
//                                     <button className="pull-left btn-link"
//                                         ref={(e: HTMLButtonElement) => {
//                                             if (!e) return;

//                                             var clipboard = new ClipboardJS(e, {
//                                                 text: function () {
//                                                     return storeHomeUrl;
//                                                 }
//                                             });

//                                             clipboard.on('success', function (e) {
//                                                 ui.showToastMessage('商品链接已经成功复制');
//                                             });

//                                             clipboard.on('error', function (e) {
//                                                 ui.alert('商品链接已经成功失败');
//                                             });
//                                         }}>
//                                         复制页面链接
//                                     </button>
//                                     <div className="pull-right">
//                                         <button className="btn-link"
//                                             onClick={() => {
//                                                 // let url = userApp.createUrl(siteMap.nodes.home_index);
//                                                 window.open(storeHomeUrl, "_blank");
//                                             }}>
//                                             电脑访问
//                                         </button>
//                                     </div>
//                                 </div>
//                             </div>
//                         </li>
//                         <li className="pull-right">
//                             <button className="btn btn-sm btn-primary"
//                                 ref={(e: HTMLButtonElement) => {
//                                     if (!e) return;
//                                     e.onclick = ui.buttonOnClick(() => this.save(), { toast: "保存成功" });
//                                 }}>
//                                 <i className="icon-save"></i>
//                                 <span>保存</span>
//                             </button>
//                         </li>
//                     </ul>
//                     <div className="clearfix">
//                     </div>
//                     <div className="well" style={{ minHeight: 100 }}>
//                         <div className="row form-group">
//                             <div className="col-lg-12">
//                                 <label className="col-md-4" style={{ width: 120 }}>店铺名称*</label>
//                                 <div className="col-md-8" style={{ maxWidth: 300 }}>
//                                     <input name="name" className="form-control" value={store.name}
//                                         onChange={(e) => {
//                                             store.name = (e.target as HTMLInputElement).value;
//                                             this.setState(this.state);
//                                         }}
//                                         ref={(e: HTMLInputElement) => this.nameInput = e || this.nameInput} />
//                                 </div>
//                             </div>
//                         </div>
//                         <div className="row form-group">
//                             <div className="col-lg-12">
//                                 <label className="col-md-4" style={{ width: 120 }}>店铺图标</label>
//                                 <div className="col-md-8" style={{ maxWidth: 300 }}>
//                                     <img className="img-responsive" src={imageUrl(store.data.ImageId)}
//                                         title="点击上传店铺图标"
//                                         ref={(e: HTMLImageElement) => {
//                                             if (!e) return;
//                                             ui.renderImage(e, { imageSize: { width: 300, height: 300 } });
//                                             e.onclick = () => {
//                                                 imageManager.show((imageIds) => {
//                                                     debugger
//                                                     store.data.ImageId = imageIds[0];
//                                                     this.setState(this.state);
//                                                 })
//                                             }
//                                         }} />
//                                 </div>
//                             </div>

//                         </div>
//                     </div>


//                 </div>
//             );
//         }
//     }

//     let sotreId = site.appIdFromLocation();
//     let store = await member.store(sotreId);
//     ReactDOM.render(<StationIndexPage store={store} />, page.element);
// }

interface ImageUploadProps extends React.Props<ImageUpload> {
    src?: string
}
interface ImageUploadState {
    src: string
}
class ImageUpload extends React.Component<ImageUploadProps, ImageUploadState>{
    private imageElement: HTMLImageElement;
    private width = 200;
    private height = 200;
    private _chnaged = false;
    constructor(props) {
        super(props);

        let emptyImage = ui.generateImageBase64(this.width, this.height, "请上传图片", { bgColor: 'white' })
        this.state = { src: this.props.src || emptyImage };
    }
    private async onFileChanged(e) {
        if (!e.files[0]) {
            return;
        }

        let data = await ui.imageFileToBase64(e.files[0], { width: this.width, height: this.height });
        // this.state.src = data.base64;
        this._chnaged = true;
        // this.setState(this.state);
        this.setState({ src: data.base64 })
    }
    get changed() {
        return this._chnaged;
    }
    render() {
        let src = this.state.src;
        return [
            <img key="img" style={{ width: this.width, height: this.height }} data-src={src}
                ref={(e: HTMLImageElement) => {
                    this.imageElement = e || this.imageElement;
                    e ? ui.renderImage(e) : null;
                }}
                src={src} />,
            <input key="file" name="ImageUpload" type="file" id="ImageUpload" multiple={true}
                style={{ position: 'absolute', top: 0, opacity: 0, height: this.height, width: this.width }}
                ref={(e: HTMLInputElement) => {
                    if (!e) return;
                    e.onchange = () => this.onFileChanged(e);
                }} />
        ]
    }
}